<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>达人服务-欢聚网</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" th:href="@{/css/mui.min.css}" />
		<link rel="stylesheet" th:href="@{/css/common.css}" />
		<link rel="stylesheet" th:href="@{/css/icons-extra.css}" />
		<style>
			.mui-control-content {
				background-color: white;
				min-height: 200px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			#sliderSegmentedControl .mui-scroll .mui-control-item.mui-active {
				border-bottom: 2px solid #007aff !important;
				line-height: 36px;
			}
			
			.cj-serives-item {
				width: 100%;
				height: 120px;
				margin-top: 8px;
			}
			
			.cj-serives-item .cj-serives-item-info div {
				color: #fff;
				margin-left: 20px;
			}
			
			.cj-serives-item-price {
				margin-top: 2px;
			}
			
			.mui-pull-bottom-wrapper {
				text-align: center !important;
				color: #999 !important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">达人服务</h1>
		</header>
		<div class="mui-content ">
			<div id="slider" class="mui-slider ">

				<div id="sliderSegmentedControl" class="  mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll ">
						<a class="mui-control-item mui-active" href="#item1mobile">
							全部
						</a>
						<a class="mui-control-item" href="#item2mobile">
							摄影达人
						</a>
						</a>
						<a class="mui-control-item" href="#item3mobile">
							互动达人
						</a>
						<a class="mui-control-item" href="#item4mobile">
							烧烤师
						</a>
						<a class="mui-control-item" href="#item5mobile">
							厨师
						</a>
						<a class="mui-control-item" href="#item6mobile">
							Live
						</a>
					</div>

				</div>

				<div class="mui-slider-group cj-bg-white">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active ">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll " id="all">
								<div class="mui-content-padded">

								</div>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll" id="photograph">
								<div class="mui-content-padded">
									<div class="mui-loading">
										<div class="mui-spinner">
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll" id="iteract">
								<div class="mui-content-padded">
									<div class="mui-loading">
										<div class="mui-spinner">
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div id="scroll4" class="mui-scroll-wrapper">
							<div class="mui-scroll" id="barbecue">
								<div class="mui-content-padded">
									<div class="mui-loading">
										<div class="mui-spinner">
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					<div id="item5mobile" class="mui-slider-item mui-control-content">
						<div id="scroll5" class="mui-scroll-wrapper">
							<div class="mui-scroll" id="cook">
								<div class="mui-content-padded">
									<div class="mui-loading">
										<div class="mui-spinner">
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					<div id="item6mobile" class="mui-slider-item mui-control-content">
						<div id="scroll6" class="mui-scroll-wrapper">
							<div class="mui-scroll" id="live">
								<div class="mui-content-padded">
									<div class="mui-loading">
										<div class="mui-spinner">
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<div th:include="common/footer :: nav"></div>
		<script src="/js/mui.min.js"></script>
		<script src="/js/jquery.min.js"></script>
		<script src="/js/common.js"></script>
		<script src="/js/mui.pullToRefresh.js"></script>
		<script src="/js/mui.pullToRefresh.material.js"></script>
		<script>
			var page = new Array(1, 1, 1, 1, 1, 1);
			var domArray = new Array('#all', '#photograph', '#iteract', '#barbecue', '#cook', '#live');
			var type = new Array('摄影达人', '摄影达人', '互动达人', '烧烤师', '厨师', 'Live');
			var item = new Array(
				'',
				document.getElementById('photograph'),
				document.getElementById('iteract'),
				document.getElementById('barbecue'),
				document.getElementById('cook'),
				document.getElementById('live'),
			);

			mui("#all").pullToRefresh({
				up: {
					height: 50,
					auto: true,
					contentrefresh: "正在加载...",
					contentnomore: '没有更多数据了',
					callback: function() {
						var self = this;
						htnl = getList(page[0], "摄影达人", $("#all .mui-content-padded"), self);
						page[0]++;
					}
				}
			});

			//计算滑动区域高度
			var selecterTop = $("#sliderSegmentedControl").offset().top;
			var footerTop = $("#footer").offset().top;
			var distance = footerTop - selecterTop;
			var content = document.getElementsByClassName("mui-control-content");
			for(var i = 0; i < content.length; i++) {
				content[i].style.minHeight = distance - 35 + "px";
			}

			mui(".mui-scroll-wrapper").scroll({
				indicators: true //是否显示滚动条
			});
		

			document.getElementById('slider').addEventListener('slide', function(e) {
				if(e.detail.slideNumber != 0) {
					var num = e.detail.slideNumber;
					if(item[num].querySelector('.mui-loading')) {
						mui(domArray[num]).pullToRefresh({
							up: {
								height: 50,
								auto: true,
								contentrefresh: "正在加载...",
								contentnomore: '没有更多数据了',
								callback: function() {
									var self = this;
									htnl = getList(page[num],type[num], $(domArray[num]+" .mui-content-padded"), self);
									page[num]++;
								}
							}
						});
					}
				}
			
			});
			
			function getList(page, type, dom, obj) {
				var html = '';

				$.ajax({
					url: "/talent/show/" + page + "?product_type=达人服务&mold_name=" + type,
					type: 'get',
					async: false,
					dataType: 'json',
					complete: function(response) {

						if(response.status==500){
							//$(".mui-loading").hide();
							$(".mui-pull-loading").text("没有更多数据了");
						}
					},
					success: function(response) {
						if(page == 1) {
							dom.html("");
						}
						if(response.result.list.length < 5) {
							obj.endPullUpToRefresh(true);
						} else {
							obj.endPullUpToRefresh(false);
						}
						for(var i = 0; i < response.result.list.length; i++) {
							html = html + '<div onclick="go(\'/talent/detail\')" class="cj-serives-item" style="background:url(\'/img/serives-' + i + '.jpg\');">' +
								'<div class="cj-line-60"></div>' +
								'<div class="cj-serives-item-info">' +
								'<div class="cj-text-weight">' + response.result.list[i].product.title + '</div>' +
								'<div class="cj-serives-item-price">￥' + response.result.list[i].product.value + '</div>' +
								'</div>' +
								'</div>';
						}
						dom.append(html);
					}
				});
			}
		</script>
	</body>

</html>